<template>
    <div>
        <el-card>
            <el-row>
                <el-col :span='8'>用户姓名：<el-input v-model='input' style='width: 80%'></el-input></el-col>
                <el-col :span='8'>&nbsp;</el-col>
                <el-col :span='8'><el-button @click='search'>检索</el-button>
                </el-col>
            </el-row>
            <br>
            <br>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="name"
                    label="用户姓名"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="用户名"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="用户地址"
                    width="300">
                </el-table-column>
                <el-table-column
                    prop="idcard"
                    label="用户身份证号"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="money"
                    label="金额"
                    width="120">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                        <el-button type="text" @click='handleClickEdit(scope.row)' size="small">充值</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br><br>
            <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page='current'
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    created() {
        this.$http.get("/v1/user/list?role=user").then(res=>{
            this.tableData = res.records
            this.current = res.current
            this.total = res.total
        })
    },
    methods: {
        aa(){
            this.dialogFormVisible = false

        },
        save(){
            this.$http.post("/v1/user/save",this.form).then(res=>{
                this.dialogFormVisible = false
                alert("操作成功")
                this.form = {}
                this.search()
            })
        },
        handleClick(row) {
            console.log(row);
            this.$http.get("/v1/user/delete?id="+row.id).then(res=>{
                alert("删除成功")
                this.search()
            })
        },
        handleClickEdit(row) {
            this.$prompt('请输入金额', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
              this.$http.get("/v1/user/chong",{
                  params:{
                      id:row.id,
                      money:value
                  }
              }).then(res=>{
                  alert("充值成功")
                  this.search()
              })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        handleCurrentChange(val) {
            if (this.input === ''){
                this.input = null
            }
            this.$http.get("/v1/user/list",{
                params:{
                    page:val,
                    role:'user',
                    name:this.input
                }
            }).then(res=>{
                this.tableData = res.records
                this.current = res.current
                this.total = res.total
            })
        },
        search(){
            if (this.input === ''){
                this.input = null
            }
            this.$http.get("/v1/user/list",{
                params:{
                    role:'user',
                    name:this.input
                }
            }).then(res=>{
                this.tableData = res.records
                this.current = res.current
                this.total = res.total
            })
        }
    },

    data() {
        return {
            current:1,
            total:10,
            input:null,
            tableData: [],
        }
    }
}
</script>

<style scoped>

</style>
